import React from "react";
import { Radio, Input,Button } from 'antd';
import './NewRules.css'
import {Link} from 'react-router-dom'
export default class NewRules extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      showElem1: true,
      showElem2: false,
      showElem3: false,
    };
  }
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };
  show1 = e => {
    this.setState({
      showElem1: true,
      showElem2: false,
      showElem3: false
    })
  }
  show2 = e => {
    this.setState({
      showElem1: false,
      showElem2: true,
      showElem3: false
    })
  }
  show3 = e => {
    this.setState({
      showElem1: false,
      showElem2: false,
      showElem3: true
    })
  }
  render() {
    return (
      <div>
        <div>
          <h3>新增规则</h3>
        </div>
        <div className={'newrules'}>
          <span>作用商品范围</span>
          <div>
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio onChange={this.show1} value={1}>全部商品</Radio>
              <Radio onChange={this.show2} value={2}>指定分类</Radio>
              <Radio onChange={this.show3} value={3}>指定品牌</Radio>
            </Radio.Group>
          </div>
        </div>
        <div >
          {
            this.state.showElem1 ? (
              <div className={'showthings1'}>
                <div>
                  <span>员工拉新提成比例</span>
                  <Input />
                  <span>%</span>
                </div>
                <div>
                  <span>客户拉新提成比例</span>
                  <Input />
                  <span>%</span>
                </div>
              </div>
            ) : null
          }
        </div>
        <div >
          {
            this.state.showElem2 ? (
              <div className={'showthings2'}>
                <Input placeholder="选择商品分类" />
                <div>
                  <div>
                    <span>员工拉新提成比例</span>
                    <Input />
                    <span>%</span>
                  </div>
                  <div>
                    <span>客户拉新提成比例</span>
                    <Input />
                    <span>%</span>
                  </div>
                </div>
              </div>
            ) : null
          }
        </div>
        <div >
          {
            this.state.showElem3 ? (
              <div className={'showthings2'}>
                <Input placeholder="选择商品品牌" />
                <div>
                  <div>
                    <span>员工拉新提成比例</span>
                    <Input />
                    <span>%</span>
                  </div>
                  <div>
                    <span>客户拉新提成比例</span>
                    <Input />
                    <span>%</span>
                  </div>
                </div>
              </div>
            ) : null
          }
        </div>
        <div className={'final'}>
        <Button className={'button'} style={{ backgroundColor: 'white', border: '1px solid #D3D3D3', color: 'black' }} type="primary">取消</Button>
        <Link to="/homepage/pullnewcommission">
          <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">保存</Button>
        </Link>
        
        </div>
      </div>
    );
  }
}
